<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能旅游Bot对话Demo</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; background: #f7f7fa; }
        #chat {
            border: 1px solid #e0e0e0;
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            height: 420px;
            overflow-y: auto;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .msg {
            margin: 10px 0;
            display: flex;
        }
        .msg.user { justify-content: flex-end; }
        .msg.bot { justify-content: flex-start; }
        .bubble {
            max-width: 70%;
            padding: 10px 16px;
            border-radius: 18px;
            font-size: 15px;
            line-height: 1.6;
            word-break: break-all;
        }
        .msg.user .bubble {
            background: #4f8cff;
            color: #fff;
            border-bottom-right-radius: 4px;
        }
        .msg.bot .bubble {
            background: #f1f3f6;
            color: #222;
            border-bottom-left-radius: 4px;
        }
        #input {
            width: 75%;
            padding: 10px;
            border-radius: 6px;
            border: 1px solid #ccc;
            font-size: 15px;
        }
        #send {
            padding: 10px 22px;
            border-radius: 6px;
            border: none;
            background: #4f8cff;
            color: #fff;
            font-size: 15px;
            margin-left: 8px;
            cursor: pointer;
        }
        #send:disabled { background: #b3cdfd; cursor: not-allowed; }
    </style>
</head>
<body>
    <h2>智能旅游Bot对话Demo</h2>
    <div id="chat"></div>
    <div style="display:flex;align-items:center;">
        <input id="input" type="text" placeholder="请输入您的问题..." />
        <button id="send">发送</button>
    </div>
    <script>
        const chat = document.getElementById('chat');
        const input = document.getElementById('input');
        const send = document.getElementById('send');
        function appendMsg(sender, msg, isStreaming = false) {
            const div = document.createElement('div');
            div.className = 'msg ' + sender;
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            bubble.textContent = msg;
            div.appendChild(bubble);
            chat.appendChild(div);
            chat.scrollTop = chat.scrollHeight;
            return bubble;
        }
        function setBotThinking() {
            const bubble = appendMsg('bot', '...');
            return bubble;
        }
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') send.click();
        });
        send.onclick = async function() {
            const text = input.value.trim();
            if (!text) return;
            appendMsg('user', text);
            input.value = '';
            input.disabled = true;
            send.disabled = true;
            // 非流式输出
            let botBubble = appendMsg('bot', '');
            try {
                const resp = await fetch('/agent/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ question: text })
                });
                const data = await resp.json();
                botBubble.textContent = data.answer || JSON.stringify(data);
            } catch (e) {
                botBubble.textContent = '请求失败';
            }
            input.disabled = false;
            send.disabled = false;
            input.focus();
        };
    </script>
</body>
</html>
